<template>
  <div id="UserManage">
    <Modal
        :title="Title"
        v-model="newModal"
        class-name="vertical-center-modal">
        <Form :model="formModel" label-position="right" :label-width="55">
        <FormItem label="用户名">
            <Input v-model="formModel.userName"></Input>
        </FormItem>
        <FormItem label="密码">
            <Input v-model="formModel.password" type="password"></Input>
        </FormItem>
    </Form>
    </Modal>
    <Card shadow>
      <Row>
          <Col span="12">
            用户类型 
            <Select v-model="role" class="_search" @on-change='change_status(role)'>
                <Option v-for="item in roleList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </Col>
          <!-- <Col span="12" class="_searchBtn">
            <Button type="primary" shape="circle" icon="ios-search" @click="ToSearch">查询</Button>
          </Col> -->
      </Row>
      <Divider />
      <Row class="_searchBtn">
        <Button type="dashed" @click="ToAdd">新增</Button>
        <Button type="dashed" @click="ToDelete" class="ml10">删除</Button>
      </Row>
      <Table width="100%" border :columns="columns" :data="Content" class="mt20"></Table>
    </Card>
    <Page :total="100" show-elevator show-total class="mt20"/>
  </div>
</template>
<script>
import { getUserData } from "@/api/appUser";
export default {
  name: "UserManage",
  data() {
    return {
      formModel: {
        userName: "",
        password: ""
      },
      newModal: false,
      Title: "新增用户",
      isEdit: false,
      roleList: [
        {
          value: "",
          label: "全部"
        },
        {
          value: "0",
          label: "游客"
        },
        {
          value: "1",
          label: "学生用户"
        }
      ],
      role: "",
      address: "",
      //数据表格
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center",
          fixed: "left"
        },
        {
          type: "index",
          width: 60,
          align: "center"
        },
        {
          title: "用户名",
          key: "userName"
        },
        {
          title: "手机号",
          key: "phone"
        },
        {
          title: "学生姓名",
          key: "name"
        },
        {
          title: "学号",
          key: "number"
        },
        {
          title: "年级",
          key: "grad"
        },
        {
          title: "专业",
          key: "major"
        },
        {
          title: "导师",
          key: "teacher"
        },
        {
          title: "辅导员",
          key: "assistant"
        },
        {
          title: "操作",
          key: "action",
          fixed: "right",
          width: 65,
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "text",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.ToAdd(params.index, true);
                    }
                  }
                },
                "编辑"
              )
            ]);
          }
        }
      ],
      Content:[]
    };
  },
  methods: {
    //查询
    // ToSearch() {
    //   let checkStudent = this.role;
    //   // getUserData(checkStudent).then(res => {
    //   //   this.Content = res.data;
    //   // });
		// },
		//change
		change_status(){
			this.Content = [
        {
          userName: "123",
          phone: 13590664621,
					name: '梁浩滔',
					number: 1540624205,
					grad: 2015,
					major: '网络与新媒体(新媒体设计与开发)',
					teacher: '梁子杰',
					assistant:'许恒梅'
        }]
		},
    //新增、编辑
    ToAdd(index, isEdit) {
      let self = this;
      self.newModal = true;
      if (isEdit == true) {
				self.Title = "编辑用户";
				self.formModel.userName = '123';
				self.formModel.password = '123'
      } else {
				self.Title = "新增用户";
				self.formModel.userName = '';
				self.formModel.password = ''
      }
    },
    //删除
    ToDelete() {
			let self = this;
			self.$Modal.warning({
					title: '提示',
					content: '是否删除用户：'+ self.Content[0].userName,
					onOk: () => {
						self.Content = []
					}
			});
		}
  }
};
</script>
<style lang="less" scoped>
</style>
